@use '@/styles/var' as *;
@use '@/styles/fun' as *;

.ContentMdComponent {
  .markdown-body {
    @apply font-[inherit] dark:bg-transparent dark:text-gray-400 !important;

    pre.mac-style {
      position: relative;
      margin: 1rem 0;
      padding-top: 2.5rem;
      background-color: #121212;
      border-radius: 10px;
      overflow: auto;
      font-size: 1rem;
      color: #dcdcdc;
      font-family: inherit;

      &::before {
        content: '';
        position: absolute;
        top: 0.75rem;
        left: 1rem;
        width: 0.75rem;
        height: 0.75rem;
        background: #ff5f56;
        border-radius: 50%;
        box-shadow: 1rem 0 0 #ffbd2e, 2rem 0 0 #27c93f;
        z-index: 2;
      }

      .language-label {
        position: absolute;
        top: 0.75rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.75rem;
        color: #ccc;
        font-weight: bold;
        text-transform: lowercase;
        -webkit-user-select: none;
        user-select: none;
        z-index: 3;
      }

      .copy-button {
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        background: #2c2c2c;
        color: #ccc;
        border-radius: 4px;
        padding: 4px 6px;
        font-size: 0.875rem;
        z-index: 4;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        transition: background-color 0.2s;

        &:hover {
          background: #444;
        }
      }

      &.collapsed {
        max-height: 320px;
        overflow: hidden;
        cursor: pointer;

        &::after {
          content: '点击展开代码';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          text-align: center;
          background: linear-gradient(to top, #121212 60%, transparent);
          color: #999;
          padding: 12px 0;
          font-size: 0.875rem;
          z-index: 5;
          -webkit-user-select: none;
          user-select: none;
        }
      }

      &.expanded {
        max-height: none;
      }

      code.hljs {
        display: block;
        white-space: pre-wrap;
        font-family: inherit !important;
        background: transparent !important;
        color: inherit !important;
        padding: 1rem;
      }

      .toggle-btn {
        position: absolute;
        bottom: 4px;
        right: 8px;
        background: rgba(0, 0, 0, 0.5);
        color: #ccc;
        font-size: 0.75rem;
        padding: 2px 6px;
        border-radius: 4px;
        z-index: 6;
        cursor: pointer;

        &:hover {
          background: rgba(0, 0, 0, 0.8);
        }
      }
    }
  }

  img {
    @apply blur-[20px] rounded-xl hover:scale-105 cursor-pointer transition-all;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
    scroll-margin-top: 100px !important;
    @apply dark:text-white dark:border-black-b;
  }

  h1 {
    @apply text-2xl mt-10 pb-3 border-b;
    &:first-child {
      @apply my-6;
    }
  }

  h2 {
    @apply relative text-xl my-6;
  }

  h3 {
    @apply relative text-lg my-5;
  }

  h4,
  h5,
  h6 {
    @apply relative text-lg my-3;
  }

  hr {
    @apply my-5 border dark:border-[#4e5969];
  }

  p code,
  ul code,
  ol code {
    @apply bg-[rgba(13,110,253,0.1)] dark:bg-[#334052] text-[#0d6efd] rounded-md py-1 px-2 text-sm;
  }

  li.task-list-item {
    @apply my-2.5;
  }

  li:not(.task-list-item) {
    @apply my-2.5 ml-6;
  }

  ul:not(.contains-task-list) {
    @apply list-disc;
  }

  ol:not([start]) {
    counter-reset: counter;
  }

  ol > li:not([id^='user-content-fn-']) {
    &::before {
      @apply absolute w-4 h-4 mt-1 leading-none left-0 rounded-full text-center text-sm border border-[#11181C] dark:border-gray-400;
      counter-increment: counter;
      content: counter(counter);
    }

    & ol > li::before {
      @apply absolute left-7 border-0 text-base mt-0 leading-normal;
      content: counter(counter) '.';
    }
  }

  blockquote {
    @apply my-5 pl-4 bg-[rgba(246,248,250)] border-l-[4px] border-[#11181C] dark:border-gray-500 dark:bg-[rgba(246,248,250,0.1)];
  }

  .footnotes {
    @apply mt-10 before:content-[''];
    & > h2 {
      @apply text-yellow-500;
    }

    &::before {
      @apply block w-full h-[1px] bg-gray-300;
    }

    & ol {
      @apply list-decimal;
    }
  }

  mark {
    @apply bg-[#dbfdad] dark:bg-[#9db47e];
  }

  .callout-content {
    @apply pt-1;
    & > p {
      @apply mb-0;
    }
  }

  .katex {
    @apply text-base;
  }

  a {
    @apply text-primary;
  }

  p {
    @apply leading-9 mb-2;
  }

  strong {
    @apply text-[15px];
  }

  table {
    @apply w-full;

    th {
      @apply bg-[#f1f7fd] dark:bg-[#334052];
    }

    tr,
    th,
    td {
      @apply border p-[10px_20px];
    }
  }

  input[type='checkbox'] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    position: relative;
    cursor: not-allowed;
  }

  .douyin {
    min-width: 320px;
    min-height: 720px;
    border-radius: 10px;
    margin: 10px 0;
  }
}

// 代码块带行号样式
.mac-style.with-line-number {
  position: relative;

  .hljs {
    display: block;
    padding: 0;
    background: none;
  }

  .code-line {
    display: flex;
    align-items: flex-start;
    min-height: 1.6em;
    font-size: 1em;
    line-height: 1.6;
    white-space: pre;
  }

  .line-number {
    display: inline-block;
    width: 2.5em;
    text-align: right;
    color: #888;
    user-select: none;
    opacity: 0.6;
    margin-right: 1em;
    font-size: 0.95em;
    font-family: inherit;
  }
  
  .line-content {
    flex: 1;
    word-break: break-all;
    white-space: pre;
  }
}
